<style lang="scss" scoped>
.table_wrap_box {
    display: flex;
    height: 100%;
    .table_item {
        margin-right: 20px;
        &.flex_2 { width: 100px; }
        &.flex_3 { flex: 3; }
        &.flex_5 { flex: 5; }
        &.center {
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}
</style>

<template>
    <common-page-template :hasTable="false">
    <template #search>
      <look-search @submit="handleSubmit" />
    </template>
        <div class="table_wrap_box">
            <div class="table_item flex_2">
                <common-table 
                  :data="pageData.pitcherList" 
                  :columns="userColumn" 
                  :hasPage="false"
                  ref="tableRef"
                  :max-height="maxHeight"
                  :height="maxHeight"
                  highlight-current-row
                  @cell-click="handleCurrentChange"
                />
            </div>
            <div class="table_item center">>></div>
            <div class="table_item flex_5">
                <common-table 
                  :data="pageData.mediaList"
                  :max-height="maxHeight"
                  :height="maxHeight"
                  :columns="mediaColumns" 
                  :hasPage="false"
                />
            </div>
            <!-- <div class="table_item center">>></div> -->
            <div class="table_item flex_3">
                <common-table 
                  :data="pageData.platformList" 
                  :max-height="maxHeight"
                  :height="maxHeight"
                  :columns="platColumns" 
                  :hasPage="false"
                />
            </div>
        </div>
    </common-page-template>
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue'
import CommonTable from '@/components/commonTable/index.vue'
import { GetPitcher, LookAccount, GetSearchUser } from '@/apis/user'
import LookSearch from './componet/LookSearch.vue'
const tableRef = ref(null)
const userColumn = [
    {
        label: '投手', 
        align: 'center',
        render: row => {
            return h('span', {
                style: {
                    cursor: 'pointer'
                }
            }, row.username)
        }
    }
]
const mediaColumns = [
    {
        prop: 'mediaName', label: '媒体名称', align: 'center'
    },
    {
        prop: 'agencyName', label: '代理名称', align: 'center'
    },
    {
        prop: 'mediaAccount', label: '媒体账户', align: 'center'
    },
    {
        prop: 'viscountName', label: '子账户名称', minWidth: 100,  align: 'center'
    },
    {
        prop: 'accountId', label: '子账户ID', align: 'center'
    },
    {
        prop: 'authState', 
        label: '是否授权', 
        align: 'center'
    },
]
const platColumns = [
    {
        prop: 'platformName', label: '平台名称', align: 'center'
    },
    {
        prop: 'platAccount', label: '用户名', align: 'center'
    },
    {
        prop: 'platNickName', label: '昵称', align: 'center'
    }
]

const handleCurrentChange = val => {
  console.log('handleCurrentChange: ', val);
  val && getUserAccount(val?.username)
}
const pageData = reactive({
  pitcherList: [], // 投手列表
  mediaList: [], //媒体列表
  platformList: [], // 平台列表
  queryParams: {}
})
onMounted(() => {
  handleSubmit()
})
const handleSubmit = (formData = {}) => {
    // 获取投手列表
  pageData.queryParams = formData
  GetPitcher().then(res => {
    pageData.pitcherList = res || []
    if (formData.accountId || formData.accountName) {
        getSearchUser(formData)
    } else {
        if (res && res.length) {
            tableRef.value?.getTableRef()?.setCurrentRow(res[0])
            getUserAccount(res[0].username)
        }
    }
  })
}
const getUserAccount = async username => {
    pageData.platformList = []
    pageData.mediaList = []
    const res = await LookAccount({ username })
    const { platformList, mediaList } = res
    pageData.platformList = platformList || []
    pageData.mediaList = mediaList || []
    
}
const getSearchUser = data => {
    GetSearchUser(data).then(res => {
        if (res) {
            const index = pageData.pitcherList.findIndex(v => v.username === res)
            tableRef.value?.getTableRef()?.setCurrentRow(pageData.pitcherList[index])
            getUserAccount(res)
        }
    })
}
const maxHeight = '540px'
</script>

